<template>
	<view class="home">
		<u-navbar bgColor="#1365F9" :fixed="false">
			<view slot="left" class="align-center">
				<!-- <u-icon name="calendar" color="#fff" size="50" style="margin-right: 20rpx"></u-icon> -->
				<view class="align-center" style="padding: 18rpx 20rpx; background: #ffffff; border-radius: 16rpx">
					<!-- <view class="align-center">
						<text style="font-weight: 400; font-size: 28rpx; color: #666666; margin-right: 18rpx">房型</text>
						<image src="@/static/index/bottom@2x.png" style="width: 22rpx; height: 14rpx; margin-right: 18rpx"></image>
						<text style="font-weight: 400; font-size: 28rpx; color: #666666">|</text>
					</view> -->
					<view class="flex-between1">
						<input v-model="name" @confirm="init()" type="text" placeholder="搜索房间"
							style="font-weight: 400; font-size: 28rpx; color: #666666; margin-left: 10rpx" />
						<image src="@/static/index/serach1.png" style="width: 36rpx; height: 36rpx"></image>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="flex-between1">
			<u-tabs :list="list" @click="changeclick" lineColor="rgba(0,0,0,0)" :activeStyle="{ color: '#333333' }"
				:inactiveStyle="{ color: '#999999' }"></u-tabs>
			<view style="padding-right: 30rpx; :400 ; font-size: 28rpx; color: #999999">剩余铺位:{{ obj.num }}</view>
		</view>
		<view style="min-height: 100vh; background: #f5f6fa; padding: 40rpx 32rpx">
			<u-swipe-action>
				<u-swipe-action-item :options="options1" @click="deletefj" v-for="(item, index) in list1" :key="index"
					:name="index">
					<view @click="$tools.navigite('./detail', item.id)" class="align-center" style="padding: 20rpx">
						<view style="margin-right: 40rpx">
							<image :src="getImageUrl(item.image)" style="width: 192rpx; height: 192rpx"></image>
						</view>
						<view class="">
							<view class="align-center" style="margin-bottom: 12rpx">
								<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-right: 20rpx">
									{{ item.name }}
								</view>
								<view
									style="font-size: 24rpx; color: #63c802; padding: 2rpx 20rpx; background: #ffffff; border-radius: 8rpx; border: 1rpx solid #63c802">
									余{{ item.num - item.useNum }}
								</view>
							</view>
							<view style="font-weight: 300; font-size: 24rpx; color: #999999; margin-bottom: 16rpx">
								{{ item.num }}张 | {{ item.size }}m²
							</view>
							<view v-if="item.status == 0" @click.stop.native="
									show = true;
									roomid = item.id;
									cpobj = item;
									getbmlist();
								" class="flex-center1"
								style="font-size: 28rpx; color: #ffffff; width: 192rpx; height: 64rpx; background: #1365f9; border-radius: 32rpx">
								登记入住
							</view>
							<view v-if="item.status == 1" class="flex-center1"
								style="font-size: 28rpx; color: #ffffff; width: 192rpx; height: 64rpx; background: #999999; border-radius: 32rpx">
								已住满
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>

			<view v-if="!list1.length" style="text-align: center; padding-top: 100rpx">暂无数据~</view>
		</view>
		<movable-area class="movable-area">
			<movable-view @click="show1 = true" class="movable-view flex-column flex-between1" :x="x" :y="y"
				:position="position" direction="all" @change="onChange">
				<image @click.native.stop="show1 = true" src="@/static/mine/add.png"
					style="width: 148rpx; height: 148rpx"></image>
			</movable-view>
		</movable-area>
		<u-popup :show="show" mode="bottom" round="20">
			<view style="padding: 32rpx; max-height: 80vh; overflow: auto">
				<view style="font-weight: 600; font-size: 36rpx; color: #333333; margin-bottom: 24rpx">登记入住</view>
				<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 24rpx">劳动者信息</view>
				<view @click="show2 = true" class="flex-between1" style="margin-bottom: 40rpx">
					<text>真实姓名:</text>
					<text v-if="columns[0].length">{{ userInfo.name || '请选择' }} ></text>
					<text v-else>暂无劳动者申请</text>
				</view>
				<u-picker :show="show2" :columns="columns" keyName="userName" @confirm="confirm"
					@cancel="close2"></u-picker>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>性别:</text>
					<text v-if="userInfo.sex == 0">女</text>
					<text v-if="userInfo.sex == 1">男</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>出生日期:</text>
					<text>{{ userInfo.birthDate }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>年龄:</text>
					<text>{{ userInfo.age }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>身份证号:</text>
					<text>{{ userInfo.idcard }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>婚姻状况:</text>
					<text>{{ userInfo.marital }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>现住址:</text>
					<text>{{ userInfo.address }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>联系电话:</text>
					<text>{{ userInfo.phone }}</text>
				</view>
				<view style="font-weight: 600; font-size: 36rpx; color: #333333; margin-bottom: 24rpx">住宿信息</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>房型名称:</text>
					<text>{{ cpobj.name }}</text>
				</view>
				<view style="margin-bottom: 40rpx">
					<view style="margin-bottom: 20rpx">床位名称:</view>
					<view class="flex-wrap">
						<view @click="current2 = index" v-for="(item, index) in cplist" class="text3"
							:class="{ text4: current2 == index }" style="margin-right: 20rpx">
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>开始时间:</text>
					<text>{{ obj1.inDate }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>离店时间:</text>
					<text>{{ obj1.outDate }}</text>
				</view>
				<view class="flex-between1">
					<view @click="close" class="flex-center1"
						style="font-size: 32rpx; color: #1365f9; width: 220rpx; height: 96rpx; background: #ffffff; border-radius: 8rpx; border: 2rpx solid #1365f9">
						取消
					</view>
					<view @click="ruzhu(obj1.id, cplist[current2])" class="flex-center1"
						style="width: 426rpx; height: 96rpx; background: #1365f9; border-radius: 8rpx; font-size: 32rpx; color: #ffffff">
						入住
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show1" mode="bottom" round="20">
			<view style="padding: 32rpx">
				<view style="font-weight: 600; font-size: 36rpx; color: #333333; margin-bottom: 26rpx">新增房间</view>
				<view class="flex-between1" style="padding: 36rpx 0; border-bottom: 1rpx solid #eee">
					<view style="font-weight: 400; font-size: 28rpx; color: #333333">*房间名称：</view>
					<view class="align-center">
						<input type="text" v-model="form.name" placeholder="请输入名称"
							style="margin-right: 20rpx; text-align: right; font-weight: 400; font-size: 28rpx; color: #999999" />
						<image src="@/static/mine/mineright.png" style="width: 14rpx; height: 22rpx"></image>
					</view>
				</view>
				<view style="padding: 36rpx 0; border-bottom: 1rpx solid #eee">
					<view style="font-weight: 400; font-size: 28rpx; color: #333333; margin-bottom: 20rpx">*房间照片：</view>
					<view class="align-center">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="10" width="100" height="100" uploadIcon="plus"></u-upload>
					</view>
				</view>
				<view class="flex-between1" style="padding: 36rpx 0; border-bottom: 1rpx solid #eee">
					<view style="font-weight: 400; font-size: 28rpx; color: #333333">*房间大小：</view>
					<view class="align-center">
						<input type="number" v-model="form.size" placeholder="请输入多少"
							style="margin-right: 20rpx; text-align: right; font-weight: 400; font-size: 28rpx; color: #999999" />
            <text style="margin-right: 20rpx; text-align: right; font-weight: 400; font-size: 28rpx; color: #999999">m²</text>
            <image src="@/static/mine/mineright.png" style="width: 14rpx; height: 22rpx"></image>
					</view>
				</view>
				<view class="flex-between1" style="padding: 36rpx 0; border-bottom: 1rpx solid #eee">
					<view style="font-weight: 400; font-size: 28rpx; color: #333333">*床铺数量：</view>
					<view class="align-center">
						<input type="number" v-model="form.num" placeholder="请输入数量"
							style="margin-right: 20rpx; text-align: right; font-weight: 400; font-size: 28rpx; color: #999999" />
						<image src="@/static/mine/mineright.png" style="width: 14rpx; height: 22rpx"></image>
					</view>
				</view>
				<!-- <view class="flex-between1" style="padding: 36rpx 0; border-bottom: 1rpx solid #eee; margin-bottom: 50rpx">
					<view style="font-weight: 400; font-size: 28rpx; color: #333333">*床铺类型：</view>
					<view class="align-center">
						<input type="text" placeholder="如：简约大气六人间" style="font-weight: 400; font-size: 28rpx; color: #999999" />
						<image src="@/static/mine/mineright.png" style="width: 14rpx; height: 22rpx"></image>
					</view>
				</view> -->
				<view class="flex-between1">
					<view @click="close1" class="flex-center1"
						style="font-size: 32rpx; color: #1365f9; width: 220rpx; height: 96rpx; background: #ffffff; border-radius: 8rpx; border: 2rpx solid #1365f9">
						取消
					</view>
					<view @click="addroom" class="flex-center1"
						style="width: 426rpx; height: 96rpx; background: #1365f9; border-radius: 8rpx; font-size: 32rpx; color: #ffffff">
						完成
					</view>
				</view>
			</view>
		</u-popup>
		<Tabbar2 :value="1"></Tabbar2>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				x: 375,
				y: 500,
				position: 4,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				},
				show: false,
				show1: false,
				show2: false,
				columns: [
					[]
				],
				cplist: [],
				cpobj: {},
				userInfo: {},
				current2: 0,
				fileList1: [],
				list: [{
						name: '全部'
					},
					{
						name: '未满'
					},
					{
						name: '已满'
					}
				],
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				roomid: '',

				current: 0,
				name: '',
				list1: [],
				obj: {},
				obj1: {},
				form: {
					name: '',
					size: '',
					num: '',
					image: ''
				}
			};
		},
		onLoad() {
			this.init();
			this.getbmlist();
			this.getWindowWidth();
		},
		methods: {
			getImageUrl(urlString) {
				if (urlString && urlString.includes(',')) {
					return urlString.split(",")[0]
				} else {
					return urlString
				}

			},
			init() {
				const data = {
					status: this.current - 1,
					name: this.name
				};
				this.$request('front/home/getRoomList', data).then((res) => {
					console.log(res.obj, 'res');
					this.list.map((item, index) => {
						if (index == 0) {
							item.name = '全部' + '(' + res.obj.count + ')';
						}
						if (index == 1) {
							item.name = '未满' + '(' + res.obj.count1 + ')';
						}
						if (index == 2) {
							item.name = '已满' + '(' + res.obj.count2 + ')';
						}
					});
					this.obj = res.obj;
					this.list1 = res.obj.rooms;
				});
			},
			getbmlist() {
				this.$request('front/home/getSignList').then((res) => {
					console.log(res.obj, '登记');
					this.columns[0] = res.obj;
					console.log(this.columns, '登记111');
				});
				this.$request('front/home/getBed', {
					roomId: this.roomid
				}).then((res) => {
					console.log(res.obj, '床铺');
					this.cplist = res.obj;
				});
			},
			addroom() {
				this.$request('front/home/addRoom', this.form).then((res) => {
					console.log(res, 'res');
					if (res.code == 0) {
						this.show1 = false;
						this.$tools.toast('操作成功');
						setTimeout(() => {
							this.init();
						}, 1000);
					}
				});
			},
			deletefj(e) {
				console.log(e);
				this.$request('front/home/removeRoom', {
					id: this.list1[e.index].id
				}).then((res) => {
					console.log(res, 'res');
					this.$tools.toast('操作成功');
					setTimeout(() => {
						this.init();
					}, 1000);
				});
			},
			getWindowWidth() {
				let _this = this;
				uni.getSystemInfo({
					success: (res) => {
						this.x1 = 0;
						this.x2 = parseInt(res.windowWidth) - 50;
						this.y1 = 0;
						this.y2 = parseInt(res.windowHeight) - 20;
					}
				});
			},
			onChange(e) {
				this.move.x = e.detail.x;
				this.move.y = e.detail.y;
			},
			onTouchend() {
				this.x = this.move.x;
				this.y = this.move.y;
				setTimeout(() => {
					if (this.move.x < this.x2 / 2) this.x = this.x1;
					else this.x = this.x2;
				}, 100);
			},
			ruzhu(id, badId) {
				if (!this.userInfo.name) return this.$tools.toast('请选择人员');
				if (!badId) return this.$tools.toast('无床位');
				this.$request('front/home/success', {
					id,
					badId: badId.id
				}).then((res) => {
					console.log(res, '入住');
					this.$tools.toast('操作成功');
					this.show = false;
					setTimeout(() => {
						this.init();
					}, 1000);
				});
			},
			changeclick(e) {
				console.log(e);
				this.current = e.index;
				this.init();
			},
			confirm(e) {
				this.userInfo = e.value[0].userInfo;
				this.obj1 = e.value[0];
				console.log(this.obj1);
				this.close2();
			},
			close() {
				this.show = false;
			},
			close1() {
				this.show1 = false;
			},
			close2() {
				this.show2 = false;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.setimg(event);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					fileListLen++;
				}
				this.setimg(event);
			},

			setimg(event) {
				const list = [];
				this[`fileList${event.name}`].map((item, index) => {
					list.push(item.url);
				});
				this.form.image = list.join(',');
			}
		}
	};
</script>

<style lang="less" scoped>
	.movable-area {
		height: calc(100vh - var(--status-bar-height));
		width: 750rpx;
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		pointer-events: none;
		z-index: 100;
	}

	.movable-view {
		width: 148rpx;
		height: 148rpx;
		opacity: 1;
		position: relative;
		pointer-events: auto;
	}

	::v-deep .u-swipe-action-item {
		margin-bottom: 20rpx;
	}

	.home {
		.text1 {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}

		.text2 {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.text3 {
			font-weight: 300;
			font-size: 32rpx;
			color: #333333;
		}

		.text4 {
			font-weight: 600;
			font-size: 32rpx;
			color: #1365f9;
		}
	}
</style>
